<?php
	require_once("mars.php"); 
	require_once("database/db_mars_get_set.php"); 
	require_once("conversions.php");
?>
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mWeather - the weather on Mars</title>
<link href="styles/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Squada+One|Changa+One|Geo|Righteous' rel='stylesheet' type='text/css'></head>
<style>
	#button
	{
		cursor: pointer;
		background:#000;
		position:relative;
		margin-left: 80px;
	}
	#button:hover
	{
		color: #ff9320;
	}
</style>
<script src="conversions.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script> 
$(document).ready(function() {
$("#button").click(function () {
$(".toggle").toggle();
});});
</script>
<body>
<div id="header">
    <span id="logo"><img src="images/m-weather-logo.png" width="267" height="51" alt="logo" /></span>
  <nav id="menu">
    <ul class="nav">
      <li><a href="#">LINK I</a></li>
      <li><a href="#">LINK II</a></li>
      <li><a href="#">LINK III</a></li>
      <li><a href="#">LINK IV</a></li>
    </ul>
  </nav>
</div>
<div class="container">
  <div class="content">
        <div id="table">
      <table>
      	<tr>
      		<td colspan="2" class="td-first"><?php print(date("j F Y", strtotime($lastReport['terrestrial_date'])) . " (Sol ".$lastReport['sol'].")"); ?></td>
      	</tr>
      	<tr>
      		<td colspan="2"><img class="c-img" src="images/icons/tb_sun.png" width="71" height="71" alt="sun" /><span id="button"><img src="images/icons/convert.png"></img></span></td>
      	</tr>
      	<tr>
      		<td><img src="images/icons/tb_temp.png" width="24" height="70" alt="temperature" /></td>
      		<td><span class="toggle"><?php  print("Min " . $lastReport['min_temp'] . "&deg;C"); ?> <br/> Max <?php  print($lastReport['max_temp'])."&deg;C"; ?></span>
				<span class="toggle" style="display:none;"><?php  print("Min " . celsiusToFahrenheit($lastReport['min_temp']). "&deg;F"); ?> <br/> Max  <?php  print(celsiusToFahrenheit($lastReport['max_temp']))."&deg;F"; ?></script></span>
				</td>
      	</tr>
      	<tr>
      		<td><img src="images/icons/tb_press.png" width="63" height="63" alt="pressure" /></td>
      		<td>
			<span class="toggle"><?php  print($lastReport['pressure'] . " Pa"); ?></span>
				<span class="toggle" style="display:none;"><?php  print(paTommHg($lastReport['pressure']) . " mm Hg"); ?></script></span>
				</td>
      	</tr>
      	<tr>
      		<td><img src="images/icons/tb_wind.png" width="57" height="61" alt="wind" /></td>
      		<td><span class="toggle"><?php  print($lastReport['wind_speed'] . " km/h"); ?></span>
				<span class="toggle" style="display:none;"><?php  print(kmhToMph($lastReport['wind_speed']) . " mph"); ?></script></span>
				</td>
      	</tr>
      	<tr>
      		<td><img src="images/icons/tb_rise.png" width="71" height="35" alt="sunrise" /></td>
      		<td><?php  print($lastReport['sunrise']); ?> </td>
      	</tr>
        <tr>
      		<td><img src="images/icons/tb_set.png" width="71" height="35" alt="sunset" /></td>
      		<td><?php  print($lastReport['sunset']); ?> </td>
      	</tr>
      </table></div>
    <!-- end .content --></div>
     <aside class="sidebar1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis justo metus. Ut ultrices tincidunt tempor. Vestibulum non libero ut sapien scelerisque mollis eget eget eros. Vestibulum condimentum facilisis purus, nec sodales felis tincidunt a. Nunc adipiscing auctor sem, sed molestie dolor pharetra ut. Proin cursus convallis fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p/><p>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
      <a class="twitter-timeline"  href="https://twitter.com/MarsCuriosity"  data-widget-id="325376454584041473">Tweets by @MarsCuriosity</a> 
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
    <!-- end .sidebar1 --></aside>
  <!-- end .container --></div>
<div id="mars"></div>
</body>
</html>
